@import "Variable.less";

@esui-boxgroup-horizontal-space: 0 1em 0 0;
@esui-boxgroup-vertical-space: .5em 0;

@esui-boxgroup-arrow-size: 0.5em;
@esui-boxgroup-arrow-color: #DFDFDF;

@esui-panel-boxgroup-border-width: 0.3em;

.@{ui-class-prefix}-boxgroup-horizontal .@{ui-class-prefix}-boxgroup-wrapper {
    display: inline-block;
    margin: @esui-boxgroup-horizontal-space;
}

.@{ui-class-prefix}-boxgroup-horizontal.@{ui-class-prefix}-boxgroup-arrow {

    .@{ui-class-prefix}-boxgroup-wrapper-checked {
        position: relative;

        &:after {
            position: absolute;
            bottom: 0;
            left: 0;
            display: inline-block;
            border-right: @esui-boxgroup-arrow-size solid transparent;
            border-bottom: @esui-boxgroup-arrow-size solid @esui-boxgroup-arrow-color;
            border-left: @esui-boxgroup-arrow-size solid transparent;
            content: '';
            margin-bottom: -@esui-boxgroup-arrow-size - 0.3em;
        }
    }

    .@{ui-class-prefix}-boxgroup-arrow-hidden {
        &:after {
            display: none;
        }
    }
}

// 这个class加在对应的panel上，一般与arrow class一起使用，暂时放在这里
.@{ui-class-prefix}-panel-boxgroup-border {
    border-top: @esui-panel-boxgroup-border-width solid @esui-boxgroup-arrow-color;
}

.@{ui-class-prefix}-panel-boxgroup-border-top {
    margin-top: @esui-boxgroup-arrow-size + .2em;
    border-top: @esui-panel-boxgroup-border-width solid @esui-boxgroup-arrow-color;
}

.@{ui-class-prefix}-boxgroup-vertical .@{ui-class-prefix}-boxgroup-wrapper {
    display: block;
    margin: @esui-boxgroup-vertical-space;
}

// button style variant
.@{ui-class-prefix}-boxgroup-button-style {
    .@{ui-class-prefix}-boxgroup-wrapper {
        margin: 0;
        input[type="radio"],
        input[type="checkbox"] {
            position: absolute;
            left: 0;
            top: 0;
            .opacity(0);
            outline: none;
        }
        position: relative;
        .esui-boxgroup-button-style-border();
        
    }

    .esui-boxgroup-button-style-theme();
}

.@{ui-class-prefix}-boxgroup-button-style-primary {
    .esui-boxgroup-button-style-primary-theme();
}

.@{ui-class-prefix}-boxgroup-button-style-success {
    .esui-boxgroup-button-style-success-theme();
}

.@{ui-class-prefix}-boxgroup-button-style-info {
    .esui-boxgroup-button-style-info-theme();
}

.@{ui-class-prefix}-boxgroup-button-style-warning {
    .esui-boxgroup-button-style-warning-theme();
}

.@{ui-class-prefix}-boxgroup-button-style-danger {
    .esui-boxgroup-button-style-danger-theme();
}

.esui-boxgroup-button-style-border() when (@esui-button-radius > 0) {
    &:not(:first-child):not(:last-child) label {
        .border-radius(0);
    }
    &:first-child:not(:last-child) label {
        .border-right-radius(0);
    }
    &:last-child:not(:first-child) label {
        .border-left-radius(0);
    }
}

.esui-boxgroup-button-style-border() {}

.@{ui-class-prefix}-boxgroup {
    display: inline-block;
}

.esui-boxgroup-button-style-theme() {}
.esui-boxgroup-button-style-primary-theme () {}
.esui-boxgroup-button-style-success-theme() {}
.esui-boxgroup-button-style-info-theme() {}
.esui-boxgroup-button-style-warning-theme() {}
.esui-boxgroup-button-style-danger-theme() {}
